<template>
  <div class="train">
    <div class="train-list">
      <van-notice-bar left-icon="volume-o" scrollable text="点击选择此次乘坐的列车喔~祝您旅途愉快" />
      <div  @click="chooseClick(item)" v-for="(item, index) in trainList" :key="index">
        <h2>{{Object.keys(item)[0]}}次 列车</h2>
        <van-steps :active="0" >
          <van-step v-for="item1 in Object.values(item).flat()" :key="item1.id">
            <h3>{{item1.siteName}}</h3>
            <p>{{item1.arrivalTime}}</p>
          </van-step>
        </van-steps>
      </div>
    </div>
    <van-dialog v-model="show" style="padding-bottom:10px;"  :title="form.trainName+'次高铁线路'" :showConfirmButton="false">
      <div class="train-box">
        <van-field v-model="form.trainName"
      class="mar-bo"
        clearable
        label="列车名称"
        readonly />
      <van-field v-model="form.trainSplitSn"
      class="mar-bo"
        clearable
        type="number"
        label="车厢编号"
        placeholder="请输入车厢编号" />
      <van-field v-model="form.seatSn"
      class="mar-bo"
        type="number"
        label="座位编号"
        placeholder="请输入座位编号" />
        <div class="btn-area">
        <van-button type="danger"
          round
          size="large"
          @click="lookSubway">进入订餐~</van-button>
      </div>
    </div>
    </van-dialog>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'train',
  data() {
    return {
      trainList: [], // 列车表
      show: false,
      form: {
        trainName: '',
        trainSplitSn: '',
        seatSn: ''
      }
    }
  },
  created () {
    this.getSubwayList()
  },
  methods: {
    ...mapMutations(['setTrain']),
    /**
     * 点击选择列车次
     */
    chooseClick (item) {
      this.form.trainName = Object.keys(item)[0]
      this.show =true
    },
    /**
     * 获取列车表
     */
    getSubwayList () {
      this.$api.auth.getSubwayList().then(res => {
        if (res.code === 200) {
          this.trainList = res.data
        }
      })
    },
    /**
     * 查询高铁
     */
    lookSubway() {
      // const query = {
      //   trainName: this.form.trainName
      // }
      // this.$api.auth.ifSubway(query).then(res => {
      //   if (res.code === 200) {
      //     this.querySubway()
      //     this.setTrain(this.form)
      //   }
      // }).catch(e => this.$toast.fail('该高铁动车不存在喔~'))
      this.setTrain(this.form)
      this.show = false
      this.$router.push({
        path: '/home'
      })
    },
    /**
     * 查询路程信息
     */
    querySubway() {
      const query = {
        trainName: this.form.trainName
      }
      this.$api.auth.querySubway(query).then(res => {
        if (res.code === 200) {
          this.lineList = res.data
          this.show = true
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.train{
  padding: 20% 10px 10%;
  .train-list{
    .van-steps{
      margin: 10px 0;
    }
  }
  .train-box{
    height: 80%;
  }
  .mar-bo{
  }
  .btn-area{
    margin-top: 20px;
  }
}
</style>
